<template>
	<view class="content">
		<view class="top top-bar">
			<view class="caption">我的海报</view>
			<view class="icon iconfont icon-exit-copy-copy" @click="exitapp()"></view>
		</view>
		<view class="images-wall">
			<view class="image-item" v-for="contentInfo in contentList" @click="contentClick(contentInfo)">
				<image :src="imageServer+contentInfo.contentImg" class="image" mode="aspectFill"></image>
				<view class="title">{{contentInfo.contentText}}</view>
				<view class="author-bar">
					<view class="author-info">
						<view class="avartar">
							<image :src="contentInfo.account.head"></image>
						</view>
						<view class="author">{{contentInfo.account.nickname}}</view>
					</view>
					<view class="praise-count">
						<view class="icon iconfont icon-shoucang1"></view>
						<view class="number">{{contentInfo.contentPraiseCount}}</view>
					</view>
				</view>
			</view>
			
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token:'',
				contentList:[],
				imageServer:''
			}
		},
		methods: {
			loadContent(){
				uni.showLoading({
					title:"加载数据"
				});
				uni.request({
					url:this.serverUrl+'/api/content-infos/mine',
					method:'GET',
					header:{
						Authorization:'Bearer '+this.token
					},
					success:(result)=>{
						console.log("获取我发布的海报列表",result);
						if(result.statusCode==200){
							this.contentList=result.data.content;
						}
					},
					complete:()=>{
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				})
			},
			contentClick(contentInfo){
				uni.navigateTo({
					url:'../contentinfo/contentinfo?id='+contentInfo.id
				})
			}
		},
		onShow(){
			var token=uni.getStorageSync("token");
			this.token=token;
			console.log("mine onShow",token)
			if(token==null||token==""){
				uni.redirectTo({
					url:'../login/login'
				})
			}
		},
		onLoad(){
			var token=uni.getStorageSync("token");
			this.token=token;
			this.imageServer=this.serverUrl;
			this.loadContent();
		},
		onPullDownRefresh(){
			this.loadContent();
		}
		
	}
</script>

<style>
	.content {
		padding-top:65px;
		background-color: #efefef;
	}
	.caption{
		font-weight: bold;
		flex:1;
		margin-left:10px;
	}
	.top-bar{
		height:50px;
		position: fixed;
		top:0;
		width:750rpx;
		left:0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		z-index: 999;
		padding-bottom:10px;
	}
	.top-bar .icon{
		width:32px;
	}
	.icon-exit-copy-copy{
		font-size:26px;
	}
	.top-bar .top-left{
		display: flex;
		align-items: center;
	}
	.top-bar .avartar{
		height:36px;
		width:36px;
		border-radius: 50%;
		margin-right:20rpx;
	}
	.top-bar .icon-fanhui{
		font-size:22px;
		margin:0 15rpx;
	}
	.top-bar .nickname{
		color:#686868;
	}
	.top-bar .top-right{
		display: flex;
		align-items: center;
	}
	.top-bar .subscribe{
		padding:10rpx 20rpx;
		color:#FF2442;
		border:1px solid #FF2442;
		font-size:80%;
		border-radius: 30rpx;
		margin-right:20rpx;
	}
	.top-bar .icon-zhuanfa{
		font-size:22px;
		margin-right:20rpx;
	}
	.images-wall{
		display: flex;
		width:750rpx;
		justify-content: center;
		align-items: flex-start;
		background:#efefef;
		min-height:100vh;
		flex-wrap: wrap;
	}
	.images-wall .image-item{
		width:90%;
		flex-shrink: 0;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background:#fff;
		margin-top:20rpx;
		margin-left:7rpx;
		margin-right:7rpx;
	}
	.images-wall .image-item .image{
		width:100%;
		border-radius:5px 5px 0 0;
	}
	.images-wall .image-item .title{
		padding:5rpx 10rpx;
	}
	.images-wall .image-item .author-bar{
		padding:5rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.images-wall .image-item .author-bar .author{
		color:#686868;
		font-size:70%;
		margin-left:20rpx;
	}
	.images-wall .image-item .author-bar .author-info{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.images-wall .image-item .author-bar .author-info .avartar{
		width:50rpx;
		height:50rpx;
	}
	.images-wall .image-item .author-bar .author-info .avartar image{
		width:100%;
		height:100%;
		border-radius: 50%;
	}
	.images-wall .image-item .author-bar .praise-count{
		display: flex;
		align-items: center;
		color:#686868;
	}
	.images-wall .image-item .author-bar .praise-count .number{
		margin-left:10rpx;
		font-size:90%;
	}
</style>
